/* Reset
----------------------------------- */
@import url("normalize.css")


/* Fonts
----------------------------------- */
$font = 'MontserratRegular'
$fontBold = 'MontserratBold'
$stack = $font, Helvetica, Arial, sans-serif
$stackBold = $fontBold, Helvetica, Arial, sans-serif

@font-face
	font-family $font
	src url('./montserrat-regular.eot')
	src url('./montserrat-regular.eot?#iefix') format('embedded-opentype'),
	    url('./montserrat-regular.woff') format('woff'),
	    url('./montserrat-regular.ttf') format('truetype'),
	    url('./montserrat-regular.svg#' + $font + '') format('svg')
	font-style normal
	font-weight normal

@font-face
	font-family $fontBold
	src url('./montserrat-bold.eot')
	src url('./montserrat-bold.eot?#iefix') format('embedded-opentype'),
	    url('./montserrat-bold.woff') format('woff'),
	    url('./montserrat-bold.ttf') format('truetype'),
	    url('./montserrat-bold.svg#' + $fontBold + '') format('svg')
	font-style normal
	font-weight bold


/* Demo
----------------------------------- */
html
body
	height 100%

body
	font 14px/20px $stack
	color #222
	background #ebe7df url("") repeat-x
	*background-image url(ie/header-line.png)

a
	color #333
	text-decoration none
	border-bottom 1px solid #bbb

	&:hover
		color #000

.self
	color #333
	border-bottom 1px dotted #aaa
	cursor pointer

	&:hover
		color #000

strong
	font-family $stackBold
	font-weight 700

p
	margin 0 0 8px

label
	cursor pointer

h1
h2
h3
h4
	margin 0
	font bold 20px/60px $stackBold

h2
	height 60px
	text-align center
	text-transform uppercase

h4
	font-size 18px
	line-height 24px

ul
	margin 0
	padding 0
	list-style none

table
	width 100%
	margin-bottom 21px

th
td
	padding 11px 20px 12px
	vertical-align top
	font-weight normal
	text-align left
	border-bottom 2px solid #E7E5E0

	thead &
		background lighten(#E7E5E0, 50%)

th
	white-space nowrap

td
	width 100%

.focus
	outline 1px dotted rgba(0,0,0,.5) !important

.clear
	position relative
	*zoom 1

	&:before
	&:after
		content ''
		display table
		clear both

.layout
	width 930px
	margin 0 auto
	padding 0 15px

.header
	padding 115px 0 73px
	color #fff
	text-align center

	h1
	strong
		letter-spacing -1px
		text-transform uppercase

	h1
		padding-bottom 23px
		font-size 22px
		line-height 28px

	h3
		position relative
		padding 35px 0 17px
		font-size 120px
		line-height 140px
		letter-spacing -5px

		&:before
			content ''
			display inline-block
			width 72px
			height 64px
			margin-right 32px
			vertical-align middle
			background url(icheck.png)

		&:after
			content ''
			position absolute
			top 0
			left 50%
			width 100px
			margin-left -50px
			border-top 3px solid #fff

	strong
		font 24px/30px $stack

		a
			color #fff
			border-bottom-color #fff

.features
	position relative
	font-size 16px
	color #555
	background #fff

	.self
		color #555
		border-bottom-color #bbb

		&:hover
			color #222

	.arrows
		top 0

	&:hover .arrows .bottom
		left 0

	h2
		color #fff
		background #2489c5

	ul
		padding 44px 60px 36px

	li
		padding 0 0 9px 36px
		background url("") 0 1px no-repeat
		*background-image url(ie/icon-star.png)

		&.offset
			margin-top 20px

.mark
	padding 0 2px
	color lighten(#555, 20%)
	background lighten(#d7d4cc, 40%)

	.skin-polaris &
		background darken(#2C323C, 20%)

	.skin-futurico &
		background darken(#2E3035, 20%)

.social
	height 60px
	margin-bottom 60px
	padding 0 60px
	font-size 16px
	color #555
	background lighten(#EBE7DF, 50%)

	a
		color #777
		border-bottom-color #ccc

		&:hover
			color #444

	.left
		float left
		padding-top 19px

		li
			float left
			padding-right 30px

			a
				position relative

	.right
		float right
		padding-top 20px

		li
			float right
			padding-left 10px

		&.local
			padding-top 19px

			li
				padding-left 30px
				font-size 14px

.demo-holder
	margin-bottom 97px

.demo-title
	padding-bottom 36px
	font-size 26px
	letter-spacing -1px

.demo
	position relative

	&:hover .arrows .top
	&:hover .arrows .bottom
		left 0

.demo-list
	position relative
	margin-right 360px
	padding 33px 57px 17px
	color #555
	background #fff
	border 3px solid #ddd8ce

	ul
		float right
		white-space nowrap

		&:first-child
			float left

		li
			position relative
			padding 0 0 18px 42px

		input
			position absolute
			top 4px
			left 0

		.icheckbox_square-blue
		.iradio_square-blue
			position absolute
			top -1px
			left 0

		span
			color #bbb

.demo-methods
	padding 21px 360px 0 0

	.mark
		background darken(#e7e5e0, 10%)

	dt
		position relative
		padding 17px 150px 18px 0
		font 16px/24px $stack
		color #444
		border-bottom 3px solid #ddd8ce

		.self
			cursor pointer

			&:hover
				color #222

		.code
			position absolute
			right 0
			bottom 18px
			color #777

			.self:hover
				color #444

	dd
		position relative
		display none
		margin 0
		background #fff
		border 3px solid #ddd8ce
		border-top none

		&:before
			content ''
			position absolute
			top -13px
			left 0
			width 0
			height 0
			border 5px solid transparent
			border-bottom-color #ddd8ce
			border-left-color #ddd8ce

		.markup
			margin 0
			color #888
			background lighten(#ebe7df, 50%)
			border none

			.comment
				color #aaa

.demo-callbacks
	position absolute
	top 0
	right 0
	bottom 0
	width 300px
	color #aaa
	background #232323
	border 3px solid #ddd8ce

	h2
		color #fff
		background #6a5a8c

	ul
		position absolute
		top 60px
		width 100%
		bottom 0
		overflow auto

		li
			margin-top -1px
			padding 13px 20px 15px
			border-top 1px solid #2e2e2e

			span
				color #888

.skins
	position relative
	*zoom 1

	h2
		position absolute
		top -38px
		right 0
		left 0
		font-size 24px
		text-align center

.arrows
	position absolute
	top 3px
	left -60px
	width 60px
	overflow hidden

	.top
	.bottom
		position relative
		left 60px
		width 60px
		height 60px
		cursor pointer
		-webkit-transition left .3s, background-color .2s
		-moz-transition left .3s, background-color .2s
		-ms-transition left .3s, background-color .2s
		-o-transition left .3s, background-color .2s
		transition left .3s, background-color .2s

	.top
		background lighten(#5a9aa8, 25%) url("") 50% no-repeat
		*background-image url(ie/arrow-top.png)

		&:hover
			background-color lighten(#5a9aa8, 10%)

	.bottom
		background lighten(#dba571, 20%) url("") 50% no-repeat
		*background-image url(ie/arrow-bottom.png)

		&:hover
			background-color #dba571

@media screen and (max-width:1049px)
	.arrows
	.fork-me
		display none

.skin
	position relative
	margin-bottom 40px

	&:hover .arrows .top
	&:hover .arrows .bottom
		left 0

	h3
		position relative
		z-index 20
		float left
		height 60px
		padding 0 57px
		line-height 58px
		background #fff
		border 3px solid #ddd8ce
		border-bottom none

		&:before
			content ''
			position absolute
			top 100%
			left 0
			width 100%
			height 2px
			margin-top -1px
			background #fff

	&.skin-polaris h3
		color lighten(#7a828b, 60%)
		background #2c323c

		&:before
			background #2c323c

	&.skin-futurico h3
		color lighten(#888, 50%)
		background #2e3035

		&:before
			background #2e3035

	dl
		z-index 10
		width 100%
		margin 0

	dt
		position relative
		top -53px
		right -3px
		float right
		height 47px
		margin-right -3px
		padding 0 57px
		line-height 47px
		border 3px solid #ddd8ce
		cursor pointer

		&:hover
			background #f0ede7
			border-bottom 3px solid #ddd8ce

		&.selected
			height 50px
			background #fff
			border-bottom none
			cursor default

			&:before
				content ''
				position absolute
				top 100%
				left 0
				width 100%
				height 2px
				margin-top -1px
				background #fff

	&.skin-polaris dt
		color lighten(#7a828b, 60%)
		background lighten(#30363f, 30%)

		&:hover
			background lighten(#30363f, 15%)

		&.selected
			background #2c323c

			&:before
				background #2c323c

	&.skin-futurico dt
		color lighten(#888, 50%)
		background lighten(#2e3035, 30%)

		&:hover
			background lighten(#2e3035, 15%)

		&.selected
			background #2e3035

			&:before
				background #2e3035

	dd
		position relative
		display none
		float left
		width 100%
		margin -3px -100% 0 0
		overflow hidden
		color #444
		background #fff
		border 3px solid #ddd8ce

		&.selected
			display block

	&.skin-polaris dd
		color #7a828b
		background #2c323c

	&.skin-futurico dd
		color #888
		background #2e3035

.skin-section
	float left
	padding 42px 0 31px 57px
	line-height 18px

	h4
		padding-bottom 18px

		.skin-polaris &
			color lighten(#7a828b, 20%)

		.skin-futurico &
			color lighten(#888, 20%)

	.list
		float left
		padding-right 60px

		li
			position relative
			padding-bottom 15px

	.skin-minimal & .list li
		padding-left 38px

	.skin-square & .list li
		padding-left 42px

	.skin-flat & .list li
		padding-left 40px

	.skin-line & h4
		padding-bottom 24px

	.skin-line & .list
		padding-right 40px

		li
			padding-bottom 10px

	.skin-polaris & .list li
		padding-left 37px

	.skin-futurico & .list li
		padding-left 36px

.icheckbox_minimal
.icheckbox_minimal-red
.icheckbox_minimal-green
.icheckbox_minimal-blue
.icheckbox_minimal-aero
.icheckbox_minimal-grey
.icheckbox_minimal-orange
.icheckbox_minimal-yellow
.icheckbox_minimal-pink
.icheckbox_minimal-purple
.iradio_minimal
.iradio_minimal-red
.iradio_minimal-green
.iradio_minimal-blue
.iradio_minimal-aero
.iradio_minimal-grey
.iradio_minimal-orange
.iradio_minimal-yellow
.iradio_minimal-pink
.iradio_minimal-purple
	position absolute
	top 1px
	left 0

.icheckbox_square
.icheckbox_square-red
.icheckbox_square-green
.icheckbox_square-blue
.icheckbox_square-aero
.icheckbox_square-grey
.icheckbox_square-orange
.icheckbox_square-yellow
.icheckbox_square-pink
.icheckbox_square-purple
.iradio_square
.iradio_square-red
.iradio_square-green
.iradio_square-blue
.iradio_square-aero
.iradio_square-grey
.iradio_square-orange
.iradio_square-yellow
.iradio_square-pink
.iradio_square-purple
	position absolute
	top -1px
	left 0

.icheckbox_flat
.icheckbox_flat-red
.icheckbox_flat-green
.icheckbox_flat-blue
.icheckbox_flat-aero
.icheckbox_flat-grey
.icheckbox_flat-orange
.icheckbox_flat-yellow
.icheckbox_flat-pink
.icheckbox_flat-purple
.iradio_flat
.iradio_flat-red
.iradio_flat-green
.iradio_flat-blue
.iradio_flat-aero
.iradio_flat-grey
.iradio_flat-orange
.iradio_flat-yellow
.iradio_flat-pink
.iradio_flat-purple
	position absolute
	top 0
	left 0

.icheckbox_polaris
.iradio_polaris
	position absolute
	top -4px
	left -6px

.icheckbox_futurico
.iradio_futurico
	position absolute
	top 2px
	left 0

.skin-states
	float right
	padding-right 57px
	padding-left 0

	.state
		cursor default !important

	.list
		padding-right 0

	.skin-minimal & .list li
		padding-left 71px

	.skin-square & .list li
		padding-left 79px

	.skin-flat & .list li
		padding-left 75px

	.skin-line & .list
		padding-right 0

	.skin-polaris & .list li
		padding-left 69px

	.skin-futurico & .list li
		padding-left 67px

	.iradio_minimal
	.iradio_minimal-red
	.iradio_minimal-green
	.iradio_minimal-blue
	.iradio_minimal-aero
	.iradio_minimal-grey
	.iradio_minimal-orange
	.iradio_minimal-yellow
	.iradio_minimal-pink
	.iradio_minimal-purple
		left 33px

	.iradio_square
	.iradio_square-red
	.iradio_square-green
	.iradio_square-blue
	.iradio_square-aero
	.iradio_square-grey
	.iradio_square-orange
	.iradio_square-yellow
	.iradio_square-pink
	.iradio_square-purple
		left 37px

	.iradio_flat
	.iradio_flat-red
	.iradio_flat-green
	.iradio_flat-blue
	.iradio_flat-aero
	.iradio_flat-grey
	.iradio_flat-orange
	.iradio_flat-yellow
	.iradio_flat-pink
	.iradio_flat-purple
		left 35px

	.iradio_polaris
		left 26px

	.iradio_futurico
		left 31px

.colors
	clear both
	padding 24px 0 9px

	.skin-line &
		padding-top 28px

	strong
		float left
		line-height 20px
		margin-right 20px

	li
		position relative
		float left
		width 16px
		height 16px
		margin 2px 1px 0 0
		background #000
		cursor pointer
		filter unquote('alpha(opacity=50)')
		opacity .5
		-webkit-transition opacity .2s
		-moz-transition opacity .2s
		-ms-transition opacity .2s
		-o-transition opacity .2s
		transition opacity .2s

		&:hover
			filter unquote('alpha(opacity=100)')
			opacity 1

		&.active
			height 20px
			margin-top 0
			filter unquote('alpha(opacity=75)')
			opacity .75

		&.red
			background #d54e21

		&.green
			background #78a300

		&.blue
			background #0e76a8

		&.aero
			background #9cc2cb

		&.grey
			background #73716e

		&.orange
			background #f70

		&.yellow
			background #fc0

		&.pink
			background #ff66b5

		&.purple
			background #6a5a8c

		.skin-square &.red
			background #e56c69

		.skin-square &.green
			background #1b7e5a

		.skin-square &.blue
			background #2489c5

		.skin-square &.aero
			background #9cc2cb

		.skin-square &.grey
			background #73716e

		.skin-square &.yellow
			background #fc3

		.skin-square &.pink
			background #a77a94

		.skin-square &.purple
			background #6a5a8c

		.skin-square &.orange
			background #f70

		.skin-flat &.red
			background #ec7063

		.skin-flat &.green
			background #1abc9c

		.skin-flat &.blue
			background #3498db

		.skin-flat &.grey
			background #95a5a6

		.skin-flat &.orange
			background #f39c12

		.skin-flat &.yellow
			background #f1c40f

		.skin-flat &.pink
			background #af7ac5

		.skin-flat &.purple
			background #8677a7

		.skin-line &.yellow
			background #FFC414

.skins-info
	padding 13px 0 57px
	font-size 16px
	line-height 22px
	text-align center

	p
		margin-bottom 17px

.skin-pre
	padding 43px 60px 0

.skin-usage
	padding 25px 60px 22px
	list-style decimal outside

	li
		margin-bottom 23px

	.schemes
		margin-bottom -3px
		padding 13px 0 0 20px
		color #888

		ul
			float left
			padding-right 60px

		li
			margin 0
			padding-bottom 3px

.usage
	position relative
	margin-bottom 80px
	background #fff

	a
		border-bottom-color #ddd

	.self
		border-bottom-color #bbb

	.arrows
		top 0

	&:hover .arrows .top
	&:hover .arrows .bottom
		left 0

	h2
		color #fff
		background #1f7f5c

	h4
		margin 26px 0 10px

	p
		margin-bottom 5px

		&.offset
			margin-top 10px

		&.callbacks-info
			margin-bottom 19px

		&.methods-info
			margin-bottom 10px

		&.methods-callback
			margin-top 10px

	.markup
		margin 9px 0 16px

	.usage-inner
		font-size 15px
		line-height 23px
		padding 41px 60px 34px

.markup
	margin 10px 0 18px
	padding 8px 0 9px 17px
	font 14px/20px $stack
	color lighten(#555, 20%)
	background lighten(#d7d4cc, 40%)
	border-left 3px solid darken(#ebeae5, 10%)

	.comment
		color lighten(#555, 40%)

	.skin-polaris &
		background darken(#2C323C, 20%)
		border-left-color darken(#2C323C, 30%)

		.comment
			color #555

	.skin-futurico &
		background darken(#2E3035, 20%)
		border-left-color darken(#2E3035, 30%)

		.comment
			color #555

.browsers
	margin-bottom 74px

	h2
		margin-bottom 29px
		font-size 24px

.browsers-inner
	padding 0 60px
	font-size 15px
	line-height 23px

	p
		margin-bottom 15px

.benefits
	position relative
	margin-bottom 59px
	color #888
	background #232323

	.arrows
		top 0

	&:hover .arrows .top
	&:hover .arrows .bottom
		left 0

	h2
		color #fff
		background #6a5b8c

	a
		color #888
		border-bottom-color #444

		&:hover
			color #aaa

	.mark
		color #777
		background lighten(#232323, 10%)

.benefits-inner
	padding 41px 60px 29px
	font-size 15px
	line-height 23px

	p
		margin-bottom 15px

	ul
		margin -10px 0 15px

.download
	height 63px
	text-align center

	a
		display block
		height 60px
		font-size 18px
		line-height 58px
		color #fff
		border-bottom 0 solid darken(#E76B66, 10%)
		background #E76B66
		-webkit-transition border-bottom .2s
		-moz-transition border-bottom .2s
		-ms-transition border-bottom .2s
		-o-transition border-bottom .2s
		transition border-bottom .2s

		&:before
			content ''
			display inline-block
			width 26px
			height 26px
			margin-right 12px
			background url("")
			*background-image url(ie/icon-options.png)
			vertical-align middle

		&:hover
			border-bottom-width 3px

.license
	color #444
	text-align center
	padding 30px 0 75px

.steps
	margin 0
	padding 0
	list-style decimal outside

.footer
	padding-top 28px
	height 60px
	color #666
	background #e2dfd8

	ul
		float left

		li
			float left
			padding 2px 10px 0 0

		&.local li
			padding 0 30px 0 0

	.code
		float right

	a
		color #444

		&:hover
			color #222

.footer-inner
	width 930px
	margin 0 auto
	overflow hidden

.fork-me
	position fixed
	*position absolute
	top 0
	right 0
	width 40px
	height 40px
	overflow hidden
	text-indent 100%
	white-space nowrap
	background #28545b url("") 50% no-repeat
	*background-image url(ie/icon-fork.png)

	&:hover
		background-color #1f7f5c

.skin dt
.fork-me
	-webkit-transition background-color .2s
	-moz-transition background-color .2s
	-ms-transition background-color .2s
	-o-transition background-color .2s
	transition background-color .2s